<template>
  <div class="main">
    <div class="search">
      <el-input v-model="input" placeholder="请输入要搜索的漫画"></el-input>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button type="primary">∞全网搜索</el-button>
      <p>搜漫引擎提供全网搜索服务</p>
    </div>
    <div class="content">
      <div class="classification">
        <ul>
          <li v-for="item in classificationList" :key="item.index">
            {{ item }}
          </li>
        </ul>
        <div>
          <i class="el-icon-menu"></i>
          <p>全部分类</p>
        </div>
      </div>
      <div class="recommendDiv">
        <div class="rotation">
          <el-carousel :autoplay="true">
            <el-carousel-item
              v-for="item in recommendDivList"
              :key="item.index"
            >
              <img :src="item" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="recommendComic">
          <div
            v-for="item in recommendComicList"
            :key="item.id"
            :class="item.fild"
          >
            <img :src="item.url" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      classificationList: ['原创', '热血', '冒险', '魔法', '科幻', '奇幻', '运动', '历史', '战争', '恋爱', '后宫', '校园', '悬疑', '恐怖', '搞笑', '彩虹', '百合'],
      recommendDivList: [require('../../assets/images/comic/HomePage/recommend/1.jpg'), require('../../assets/images/comic/HomePage/recommend/2.jpg'), require('../../assets/images/comic/HomePage/recommend/3.jpg')],
      recommendComicList: [
        { id: '1', fild: 'longPhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/1.jpg') },
        { id: '2', fild: 'longPhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/2.jpg') },
        { id: '3', fild: 'shortPhhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/3.jpg') },
        { id: '4', fild: 'shortPhhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/4.jpg') },
        { id: '5', fild: 'shortPhhotoes', url: require('../../assets/images/comic/HomePage/recommendComic/5.jpg') }
      ]

    };
  }
};
</script>
<style lang="less" scoped>
.main {
  background-color: white;
  width: 100%;
  height: 100%;
}
.main .search {
  background-color: #f1f1f1;
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  > .el-input {
    width: 400px;
    height: 40px;
  }
  > .el-button {
    background-color: #fd113a;
    border-color: #fd113a;
    margin-left: 5px;
  }
  > p {
    margin-left: 15px;
    font-size: 10px;
    color: red;
  }
}
.main .content {
  // background-color: orange;
  width: 75%;
  height: 90%;
  margin: 0 auto;
  min-width: 1200px;
}
.main .content .classification {
  background-color: white;
  width: 100%;
  height: 30px;
  > ul {
    float: left;
    display: flex;
    height: 100%;
    width: 70%;
    > li {
      list-style: none;
      float: left;
      width: 30px;
      height: 100%;
      font-size: 15px;
      margin-left: 5px;
      display: flex;
      align-items: center;
    }
  }
  > div {
    width: 30%;
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    > i {
      font-size: 20px;
      margin-right: 5px;
    }
    > p {
      margin-right: 10px;
    }
  }
}
.main .content .recommendDiv {
  width: 100%;
  height: 350px;
  > .rotation {
    float: left;
    height: 100%;
    width: 468px;
    margin-left: 10px;
    > .el-carousel {
      height: 100%;
      /deep/ .el-carousel__container {
        height: 100%;
        .el-carousel__item {
          height: 100%;
          img {
            height: 100%;
          }
        }
      }
    }
  }
  > .recommendComic {
    float: left;
    width: 722px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    > .longPhotoes {
      float: left;
      width: 35%;
      //height: 50%;
      margin-left: 50px;
      display: flex;
      align-items: center;
      //min-width: 326px;
      > img {
        width: 100%;
      }
    }
    > .shortPhhotoes {
      float: left;
      height: 45%;
      margin-left: 50px;
      > img {
        height: 100%;
      }
    }
  }
}
</style>
